﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="HowToUseAjaxAutoComplete.aspx.cs"
    Inherits="JavaScriptSample.HowToUseAjaxAutoComplete" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>How to use Ajax auto complete in asp.net || JavaScript Sample</title>
    <link href="Style/AutoComplete.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">

        function fillWebsiteDetails(text, url) {
            /// <summary>
            /// fill website details when click on suggestions.
            /// </summary>
            document.getElementById('websiteUrl').innerHTML = url;
            document.getElementById('suggestions').style.display = 'none';
            document.getElementById('autoCompleteBox').value = text;
        }
        function getSuggestions(webSiteTitle) {
            /// <summary>
            /// Call suggestion web method via Ajax request
            /// </summary>
            if (window.XMLHttpRequest) {
                // for IE7+, Firefox, Chrome, Opera, Safari
                this.xmlhttp = new XMLHttpRequest();
            }
            else {
                // for IE6, IE5
                try {
                    this.xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
                } catch (e1) {
                    try {
                        // older version of Msxml
                        this.xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                    } catch (e2) {
                        this.xmlhttp = null;
                    }
                }
            }
            xmlhttp.onreadystatechange = function () {
                /// <summary>
                /// Display suggestions when success
                /// </summary>
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                    // success Status                   
                    var xmlDoc = xmlhttp.responseXML;
                    document.getElementById('autoSuggestionsList').innerHTML = '';
                    var website = xmlDoc.getElementsByTagName("Websites");
                    if (website.length > 0) {
                        for (var i = 0; i < website.length; i++) {
                            document.getElementById('autoSuggestionsList').innerHTML +=
                            '<li onclick=fillWebsiteDetails(this.innerHTML,"' +
                            website[i].getElementsByTagName("NavigationLink")[0].childNodes[0].nodeValue + '");>'
                            + website[i].getElementsByTagName("Title")[0].childNodes[0].nodeValue + '</li>';
                        }
                        document.getElementById('suggestions').style.display = 'block';
                    }
                }
            }
            this.xmlhttp.open("GET", "WebsiteList.asmx/WebsiteDetails?websiteTitle=" + webSiteTitle, true);
            this.xmlhttp.send();
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <input id="autoCompleteBox" type="text" onkeyup="getSuggestions(this.value);" />
        <div class="suggestionsBox" id="suggestions" style="display: none;">
            <ul id="autoSuggestionsList" class="suggestionList">
            </ul>
        </div>
        <div id="websiteUrl">
        </div>
    </div>
    </form>
</body>
</html>
